<template>
    <div>
        <h3>我是子组件 {{ msg }}</h3>
        <button type="button" @click="handleClick">
            点击接收子组件数据
        </button>
    </div>
</template>

<script setup lang="ts">
// 父传子
// 非TS语法
/* defineProps({
    msg: {
        type: String,
        default: '我是默认值'
    }
}) */

// TS语法
type Props = {
    msg?: string
    description?: string
}

// 默认值操作
const a = withDefaults(defineProps<Props>(), {
    msg: '我是默认值',
    description: '我是默认描述'
})

// console.log(a)


// 非TS语法 子传父
/* const emit = defineEmits(['sonHandler'])

const handleClick = () => {
    emit('sonHandler', '大别墅')
} */


// TS语法 子传父
const emit = defineEmits<{
    // Vue3.3以前的写法
    // (e: 'sonHandler', msg: string): void

    // Vue3.3以后的写法
    sonHandler: [msg: string]
}>()

const handleClick = () => {
    emit('sonHandler', '大别墅')
}
</script>

<style scoped></style>